import React, { Component } from 'react'

export default class checkZi extends Component {
    //首先测试时：子组件每次遍历有下标是通过这个方法得到的  
        //后边考虑遍历的时候逆向传值给父组件  那么就不能这样写了
    // fun(num){
    //     console.log(num)     
    // }
    render() {
        // 通过props传值
        let {ziArr,ziFun}=this.props;
        return (
            <div>
              <h1>zizizizizi</h1> 
              {
                  ziArr.map((v,i)=>{
                      return(
                          <h1 key={i}>
                              {/* 添加onChange事件以便勾选变色   i是下标*/}
                              {/* <input type="checkbox" onChange={()=>{this.fun(i)}}/> */}
                              {/* 这个时时候不能用函数，得用逆向传值 */}
                              {/* <input type="checkbox" onChange={this.props.ziFun.bind(htis,i)}/> */}
                              {/* 因为已经解构了this.prop，所以，这里不用再按照上边的写 */}
                              <input type="checkbox" onChange={ziFun.bind(this,i)}/>
                        
                              {/* 下边进行勾选变色 */}
                              {/* 第一步写的：全部变色 */}
                              {/* <span style={{background:true?"pink":""}}>{v.name}</span> */}
                              {/* 在父组件数据中加了style:false之后，开始写下边勾选，true变更为v.style,这时全部没有颜色
                            再去父组件，改一个style的样式为true */}
                              <span style={{background:v.style?"pink":""}}>{v.name}</span>

                          </h1>
                      )
                  })
              }
            </div>
        )
    }
}
